<template>
	<view style="height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #009EF0;
	background: url('../../../static/image/background1.png') no-repeat center;
	background-size: cover;">
		<view class="title">
			<text>监测预警</text>
			<image :src="screen" style="width:16px;height:19px;position: absolute;right: 30px;" @click="toscreen" />
		</view>
		<scroll-view class="scroll-Y" scroll-y="true" style="height: 93.5%;" @scrolltolower="loadingMore">
			<view class="warninglist" v-for="(item,index) in warninglist" v-bind:key="index" :name="item.index">
				<text class="listtitle">监测点位-{{ item.stationName }}</text>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<text class="level">预警级别：{{ item.prewarningLevelName }}</text>
					<text style="color:#009ff1;font-size:14px;font-weight: bold;" @click="towarningdetails(item)">详情</text>
				</view>
				<text class="reason">预警原因：{{ item.monitoringPositionName }}</text>
				<text class="source">预警来源：{{ item.reason }}</text>
				<text class="time">时间：{{ item.earlyWarnDate }}</text>
			</view>
			<text class="showList" v-if="showwarninglist">没有数据！</text>
			<text class="loading" v-if="loading">{{ Text1 }}</text>
			
			
		</scroll-view>
	</view>
</template>

<script>
	import {
		ajax
	} from "../../../api/apis";
	export default {
		data() {
			return {
				Text1:"加载更多...",
				Text:"没有更多了！",
				loading:false,
				showwarninglist:false,
				warninglist: [],
				screen: require("../../../static/image/icon_screen.png"),
				parm: {
					endDate: "",
					page: 1,
					size: 20,
					startDate: "",
					warningLevelId: ""
				},
				params: {
					page: 1,
					size: 20,
					warningLevelId: ''
				},
				dianweiIcon: require("../../../static/image/query_icon.png")
			};
		},
		methods: {
			towarningdetails(item) {
				let _this = this;
				uni.navigateTo({
					url: "../warningdetails/warningdetails?item="+ encodeURIComponent(JSON.stringify(item)) 
				});
			},
			toscreen() {
				uni.navigateTo({
					url: "../screen/screen"
				});
			},
			getwarningList() {
				let _this = this;
				ajax({
					url: "/earlyWarnInformationManagement/listInfo",
					method: "POST",
					data: _this.parm,
					success: res => {
						_this.warninglist = res.data.data.list;
					}
				});
			},
			onLoad: function(option) {
				console.log(option)
				let _this = this;
				_this.parm.startDate=option.startDate;
				_this.parm.endDate=option.endDate;
				_this.parm.warningLevelId=option.warninglevelid;
				ajax({
					url: "/earlyWarnInformationManagement/listInfo",
					method: "POST",
					data: _this.parm,
					success: res => {
						_this.warninglist = res.data.data.list;
						if(_this.warninglist.length==0){
							_this.showwarninglist=true;
						}
					}
				});
			},
			loadingMore(event) {
				// uni.removeStorageSync("warninglevelid")
				this.loading = true;
				let _this = this
				let loadingTime = setTimeout(function() {
					_this.parm.page += 1;
					_this.loading = false
					if(_this.warninglist.length<'20'){
						_this.Text1=_this.Text;
					}else{
						_this.getwarningList()
					}
				}, 2000)
			}
		},
		onPullDownRefresh() {
			this.parm={
					endDate: "",
					page: 1,
					size: 20,
					startDate: "",
					stationId: "",
					warningLevelId: ""
				}
			this.getwarningList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(){
			let _this=this
			this.parm.page+=1;
			this.getwarningList()
		},
		mounted() {
			this.getwarningList()
		}
	};
</script>

<style scoped>
	uni-page-body {
		height: 100%;
	}

	.report {
		height: 100%;
		background-color: #f9f9f9;
	}

	.title {
		font-size: 16px;
		padding: 15px;
		color: #fff;
		text-align: center;
		background: url("../../../static/image/navbg.png") no-repeat center;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.warninglist {
		/* background-color: #fff; */
		margin: 9px 10px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		padding: 6px 25px;
		line-height: 24px;
		box-shadow: 0px 2px 10px #f1f1f1;
	}

	.listtitle {
		font-size: 12px;
		color: #fff;
		font-weight: bold;
	}

	.time,
	.level,
	.reason,
	.source {
		font-size: 12px;
		color: #fff;
	}
	.loading {
		color: #fff;
		font-size: 28rpx;
		padding: 10rpx 40rpx;
	}
	.showList{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px 0;
		color: #fff;
	}
</style>
